<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
  <script src="./lib/vue.js"></script>
  <!-- <script src="./lib/vue.min.js"></script> -->
  <link rel="stylesheet" href="./lib/vant@2.12.54_lib_index.css">
  <link rel="stylesheet" href="./styles/vant.css" />
  <script src="./lib/vant@2.12.54_lib_vant.min.js"></script>
  <script src="./lib/axios-0.18.0.js"></script>
  <script src="./http/request.js"></script>
  <script src="./areaList/orderAreaList.js"></script>
  <script src="./utils/fileCompress.js"></script>
  <title>代跑跑</title>
  <style>
    .main {
      overflow: scroll;
      margin-top: 16px;
      height: 85vh;
    }

    .van-tabbar-item__icon {
      font-size: 30px;
    }

    .popup-main {
      margin: 0 16px;
    }

    .orderDetails {
      overflow-y: scroll;
    }

    .orderItem {
      margin: 16px 0;
      position: relative;
      width: 100%;
      height: 25%;
      border-radius: 8px;
      background-color: #fff;
    }

    .van-cell-group {
      background-color: var(--van-doc-background);
    }

    .order-tag {
      display: flex;
      padding: 8px 10px;
      justify-content: space-between;
    }

    .tag-left {
      display: flex;
      align-items: center;
    }

    .tag-right {
      display: flex;
      align-items: center;
      color: var(--van-warnning);
    }


    .van-divider {
      margin: 0 15px;
      border-color: #cccccc91;
    }

    .order-info {
      display: flex;
      width: 100%;
      padding: 12px 12px;
      font-size: 16px;
    }

    .toOrderDetails {
      width: 100%;
      font-size: 12px;
      color: #6e6e6e;
      margin: 0 auto;
      text-align: center;
    }

    .order-info .left {
      font-size: 14px;
    }

    .order-info .right {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: flex-end;
      align-items: flex-end;
    }

    .order-info .right .van-button--small {
      font-size: 16px;
      width: 120px;
    }

    .waiting.outOrderBtn {
      color: var(--van-primary);
      border: 1px solid var(--van-primary);
    }

    .doing.outOrderBtn {
      color: var(--van-warnning);
      border: 1px solid var(--van-warnning);
    }

    .taken.outOrderBtn {
      color: #fff;
      background-color: var(--van-success);
      border: 1px solid var(--van-success);
    }

    .done.outOrderBtn {
      color: var(--van-done);
      border: 1px solid var(--van-done);
    }

    .cannel {
      color: #fff;
      background-color: var(--van-danger);
      border: 1px solid var(--van-danger);
    }

    .cannel.cannelBtn {
      color: var(--van-danger);
      background-color: #fff;
      border: 1px solid var(--van-danger);
    }

    .waiting.takeOrderBtn {
      color: #fff;
      background-color: var(--van-primary);
      border: 1px solid var(--van-primary);
    }

    .doing.takeOrderBtn {
      color: #fff;
      background-color: var(--van-warnning);
      border: 1px solid var(--van-warnning);
    }

    .taken.takeOrderBtn {
      color: var(--van-success);
      border: 1px solid var(--van-success);
    }

    .done.takeOrderBtn {
      color: var(--van-done);
      border: 1px solid var(--van-done);
    }

    .images-preview .van-cell__value {
      display: flex;
      flex-wrap: nowrap;
      flex-direction: column;
      align-items: center;
    }

    .images-preview .imgItem {
      margin: 5px 0;
      width: 90%;
    }

    .img-cover-box {
      display: flex;
      justify-content: center;
    }

    .img-cover-box .imgItem {
      margin: 5px 0;
      width: 90%;
    }

    .detail-btn-box {
      margin: 10px 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .detail-btn-box .detailBtn {
      display: inline-block;
      width: 80%;
      height: 40px;
      font-size: 14px;
    }

    .color-mark .van-cell__value {
      color: red;
    }

    .style-center {
      width: 100%;
      display: flex;
      justify-content: center;
    }

    .codes-box {
      margin: 5px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .flex-column {
      flex-direction: column;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 标题栏 -->
    <van-nav-bar title="订单"></van-nav-bar>
    <div class="main">
      <!-- 下拉刷新 -->
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-cell-group inset>
          <!-- 分类标签页 -->
          <van-tabs type="card" v-model="tabActive" swipeable animated sticky>

            <!-- 已发订单页 -->
            <van-tab title="已发订单">

              <div class="orderItem" v-for="(item,index) in outOrderList" :key="item.orderId"
                   @click="showOutOrderDetails(item)">
                <div class="order-tag">
                  <div class="tag-left">
                    <span>&nbsp;<van-tag color="#ff976a" plain>{{item.orderType}}</van-tag></span>
                  </div>
                  <div class="tag-right">
                    <span>佣金 {{(+item.amount).toFixed(2)}}&nbsp;&nbsp;&nbsp;</span>
                  </div>
                </div>
                <van-divider></van-divider>
                <div class="order-info">
                  <div class="left">
                    <div class="left-item">
                      <span class="phone-tag">联系方式: </span>
                      <span class="user-phone">{{item.phone}} </span>
                    </div>
                    <div class="left-item" v-if="item.orderType=== '代取快递'||item.orderType=== '加急快递'">
                      <span class="adderss-tag">送达地址: </span>
                      <span class="address">{{item.address}}</span>
                    </div>
                    <div class="left-item" v-if="item.orderType === '代跑腿'">
                      <span class=" adderss-tag">任务地址: </span>
                      <span class="address">{{item.address}}</span>
                    </div>
                    <div class="left-item">
                      <span class="update-time-tag">发布时间: </span>
                      <span>{{item.createTime}}</span>
                    </div>
                  </div>

                  <div class="right" @click.stop v-if="item.orderType=== '代取快递'||item.orderType=== '加急快递'">
                    <van-button round class="cannel cannelBtn" v-if="item.orderStatus === 6" disabled
                                size="small">部分派送</van-button>
                    <van-button round class="cannel cannelBtn" v-if="item.orderStatus === -3||item.orderStatus === -5"
                                size="small">订单错误</van-button>
                    <van-button round class="cannel cannelBtn" v-if="item.orderStatus === 0" disabled
                                size="small">已退款</van-button>
                    <van-button round class="cannel" v-else-if="item.orderStatus === 1" size="small"
                                @click="cancelOrder(item)">取消订单</van-button>
                    <van-button round disabled class="doing outOrderBtn"
                                v-else-if="takeStatusArr.includes(item.orderStatus)" size="small">已接单</van-button>
                    <van-button round disabled class="doing outOrderBtn" v-else-if="item.orderStatus === 3"
                                size="small">配送中</van-button>
                    <van-button round class="taken outOrderBtn" v-else-if="item.orderStatus === 4" size="small"
                                @click="confirmArriveOrder(item)">确认送达</van-button>
                    <van-button round disabled class="done outOrderBtn" v-else-if="item.orderStatus === 5"
                                size="small">已完成</van-button>
                  </div>

                  <div class="right" @click.stop v-if="item.orderType === '代跑腿'">
                    <van-button round class="cannel cannelBtn" v-if="item.orderStatus === 0" disabled
                                size="small">已退款</van-button>
                    <van-button round class="cannel" v-else-if="item.orderStatus === 1" size="small"
                                @click="cancelOrder(item)">取消订单</van-button>
                    <van-button round disabled class="doing outOrderBtn" v-else-if="item.orderStatus === 2"
                                size="small">已接单</van-button>
                    <van-button round disabled class="doing outOrderBtn" v-else-if="item.orderStatus === 3"
                                size="small">进行中</van-button>
                    <van-button round class="taken outOrderBtn" v-else-if="item.orderStatus === 4" size="small"
                                @click="confirmArriveOrder(item)">确认完成</van-button>
                    <van-button round disabled class="done outOrderBtn" v-else-if="item.orderStatus === 5"
                                size="small">已完成</van-button>
                  </div>

                  <div class="right" @click.stop v-if="item.orderType=== '代刷网课'">
                    <van-button round class="doing  takeOrderBtn" size="small" @click="checkProcess">查询进度</van-button>
                  </div>
                </div>
                <van-divider></van-divider>
                <div>
                  <div class="toOrderDetails">点击查看详情</div>
                </div>
                <van-divider v-if="item.orderStatus === 4||item.orderStatus === -3"></van-divider>
                <div v-if="item.orderStatus === 4">
                  <div class="toOrderDetails">订单送达后一小时自动确认</div>
                </div>
                <div v-if="item.orderStatus === -3">
                  <div class="toOrderDetails" style="color: red;">您的取件信息存在问题</div>
                </div>
              </div>

            </van-tab>

            <!-- 已接订单页 -->
            <van-tab title="已接订单">
              <div class="orderItem" v-for="(item,index) in takeOrderList" :key="item.id"
                   @click="showTakenOrderDetails(item)">
                <div class="order-tag">
                  <div class="tag-left">
                    <span>&nbsp;<van-tag color="#ff976a" plain>{{item.orderType}}</van-tag></span>
                  </div>
                  <div class="tag-right">
                    <span>佣金 {{(+item.amount).toFixed(2)}}&nbsp;&nbsp;&nbsp;</span>
                  </div>
                </div>
                <van-divider></van-divider>
                <div class="order-info">
                  <div class="left">
                    <div class="left-item">
                      <span class="phone-tag">联系方式: </span>
                      <span class="user-phone">{{item.phone}} </span>
                    </div>
                    <div class="left-item">
                      <span class="adderss-tag">送达地址: </span>
                      <span class="address">{{item.address}}</span>
                    </div>
                    <div class="left-item">
                      <span class="update-time-tag">发布时间: </span>
                      <span>{{item.createTime}}</span>
                    </div>
                  </div>
                  <div class="right" @click.stop v-if="item.orderType=== '代取快递'||item.orderType=== '加急快递'">
                    <van-button round class="cannel cannelBtn" @click="takePackage(item)" v-if="item.orderStatus === -3"
                                size="small">问题件</van-button>
                    <van-button round class="waiting takeOrderBtn" @click="takePackage(item)"
                                v-if="takeStatusArr.includes(item.orderStatus)" size="small">已取件</van-button>
                    <van-button round class="doing takeOrderBtn" @click="finishPackage(item)"
                                v-else-if="item.orderStatus === 3" size="small">已送达</van-button>
                    <van-button round disabled class="taken takeOrderBtn" v-else-if="item.orderStatus === 4"
                                size="small">等待确认</van-button>
                    <van-button round disabled class="done takeOrderBtn" v-else-if="item.orderStatus === 5"
                                size="small">已完成</van-button>
                  </div>
                  <div class="right" @click.stop v-if="item.orderType=== '代跑腿'">
                    <van-button round class="waiting  takeOrderBtn" @click="takePackage(item)"
                                v-if="item.orderStatus === 2" size="small">开始任务</van-button>
                    <van-button round class="doing  takeOrderBtn" @click="finishPackage(item)"
                                v-else-if="item.orderStatus === 3" size="small">完成任务</van-button>
                    <van-button round disabled class="taken takeOrderBtn" v-else-if="item.orderStatus === 4"
                                size="small">等待确认</van-button>
                    <van-button round disabled class="done takeOrderBtn" v-else-if="item.orderStatus === 5"
                                size="small">已完成</van-button>
                  </div>
                </div>
                <van-divider></van-divider>
                <div>
                  <div class="toOrderDetails">点击查看详情</div>
                </div>
                <van-divider v-if="item.orderStatus === 4"></van-divider>
                <div v-if="item.orderStatus === 4">
                  <div class="toOrderDetails">订单送达后一小时自动确认</div>
                </div>
              </div>
            </van-tab>
          </van-tabs>

        </van-cell-group>

      </van-pull-refresh>

      <!-- 已发订单详情弹出层 -->
      <van-popup v-model="isShowOutOrderDetails" closeable round position="bottom" :style="{ height: '80%' }">

        <van-cell-group class="orderDetails" title="订单详细信息" inset></van-cell-group>

        <!-- 代取快递 -->
        <div class="popup-main" v-if="orderItem.orderType === '代取快递'||orderItem.orderType === '加急快递'">
          <van-cell v-if="orderItem.orderStatus === -5" class="color-mark flex-column" title="订单问题" readonly
                    :value="orderItem.errorMsg + '，请取消订单后重新下单'"></van-cell>
          <div style="display: flex;">
            <van-button round style="width: 90%;margin: 10px auto;" class="cannel detailBtn"
                        v-if="orderItem.orderStatus === -5" @click="cancelOrder(orderItem)">取消订单</van-button>
          </div>
          <van-cell title="订单类型" readonly :value="orderItem.orderType"></van-cell>
          <van-cell title="订单号" readonly :value="orderItem.number"></van-cell>
          <van-cell title="佣金" readonly :value="(+orderItem.amount).toFixed(2)"></van-cell>
          <van-cell title="联系方式" readonly :value="orderItem.phone"></van-cell>
          <van-cell title="取件地址" value="菜鸟驿站"></van-cell>
          <van-cell title="送达地址" readonly :value="orderItem.address"></van-cell>
          <van-cell title="期望送达时间" readonly :value="orderItem.expectTime"></van-cell>
          <van-cell title="发单时间" readonly :value="orderItem.createTime"></van-cell>
          <van-cell title="快递件数" readonly :value="orderItem.count"></van-cell>
          <div class="codes-box" v-if="orderItem.orderCounts" v-for="item in orderItem.orderCounts">
            <div>
              {{ item.takeCode }}&nbsp;
              <span style="color: red;">{{item.serverRemark}}</span>
            </div>
            <span v-if="item.takeStatus === -3" style="color: red;">{{ item.helperRemark }}</span>
            <van-icon style="display: flex; align-items: center;" v-if="item.takeStatus === 2" name="info"
                      color="#cccccc" size="30">
              <span style="font-size: 16px;">未取件</span>
            </van-icon>
            <van-icon style="display: flex; align-items: center;" v-if="item.takeStatus === 3" name="success"
                      color="#2ed0df" size="30">
              <span style="font-size: 16px;">已取件</span>
            </van-icon>
            <van-icon style="display: flex; align-items: center;" v-if="item.takeStatus === -3" name="fail"
                      color="#ee0a24" size="30">
              <span style="font-size: 16px;">问题件</span>
            </van-icon>
          </div>
          <van-cell title="取件信息" :border="false" readonly>
            <template #default>
              <div>{{ orderItem.packageInfo }}</div>
            </template>
          </van-cell>
          <van-cell class="images-preview">
            <img class="imgItem" v-for="(item,index) in orderItem.images" :key="index" :src="item">
          </van-cell>
          <van-cell title="备注" readonly v-model="orderItem.remark"></van-cell>
          <van-cell title="帮手联系方式" readonly v-model="orderItem.helperPhone"></van-cell>
          <van-cell title="帮手地址" readonly v-model="orderItem.helperAddress"></van-cell>
          <van-cell title="接单时间" readonly v-model="orderItem.takeoutTime"></van-cell>
          <van-cell title="取件时间" readonly v-model="orderItem.takeTime"></van-cell>
          <van-cell title="送达时间" readonly v-model="orderItem.deliveryTime"></van-cell>
          <van-cell title="完成时间" readonly v-model="orderItem.finishTime"></van-cell>

          <div class="img-cover-box"
               v-if="(orderItem.orderStatus === 4||orderItem.orderStatus === 5)&&orderItem.imageOver">
            <img class="imgItem" :src="orderItem?.imageOver">
          </div>
        </div>

        <!-- 代跑腿 -->
        <div class="popup-main" v-if="orderItem.orderType === '代跑腿'">
          <van-cell title="订单类型" readonly :value="orderItem.orderType"></van-cell>
          <van-cell title="订单号" readonly :value="orderItem.number"></van-cell>
          <van-cell title="佣金" readonly :value="(+orderItem.amount).toFixed(2)"></van-cell>
          <van-cell title="联系方式" readonly :value="orderItem.phone"></van-cell>
          <van-cell title="任务地址" readonly :value="orderItem.address"></van-cell>
          <van-cell title="发单时间" readonly :value="orderItem.createTime"></van-cell>
          <van-cell class="color-mark" title="快递件数" readonly :value="orderItem.count"></van-cell>
          <van-cell title="任务信息" :border="false" readonly>
            <template #default>
              <div>{{ orderItem.packageInfo }}</div>
            </template>
          </van-cell>
          <van-cell class="images-preview">
            <img class="imgItem" v-for="(item,index) in orderItem.images" :key="index" :src="item">
          </van-cell>
          <van-cell title="任务备注" readonly v-model="orderItem.remark"></van-cell>
          <van-cell title="帮手联系方式" readonly v-model="orderItem.helperPhone"></van-cell>
          <van-cell title="帮手地址" readonly v-model="orderItem.helperAddress"></van-cell>
          <van-cell title="接单时间" readonly v-model="orderItem.takeoutTime"></van-cell>
          <van-cell title="取件时间" readonly v-model="orderItem.takeTime"></van-cell>
          <van-cell title="送达时间" readonly v-model="orderItem.deliveryTime"></van-cell>
          <van-cell title="完成时间" readonly v-model="orderItem.finishTime"></van-cell>
          <div style="display: flex;">
            <van-button round style="width: 90%;margin: 10px auto;" class="cannel detailBtn"
                        v-if="orderItem.orderStatus === 1" @click="cancelOrder(orderItem)">取消订单</van-button>
          </div>

        </div>

        <!-- 代刷网课 -->
        <div class="popup-main" v-if="orderItem.orderType === '代刷网课'">
          <van-cell title="订单类型" readonly :value="orderItem.orderType"></van-cell>
          <van-cell title="订单号" readonly :value="orderItem.number"></van-cell>
          <van-cell title="佣金" readonly :value="(+orderItem.amount).toFixed(2)"></van-cell>
          <van-cell title="联系方式" readonly :value="orderItem.phone"></van-cell>
          <van-cell title="账号" readonly :value="orderItem.userNumber"></van-cell>
          <van-cell title="密码" readonly :value="orderItem.password"></van-cell>
          <van-cell title="平台类型" readonly :value="orderItem.platform"></van-cell>
          <van-cell title="课程名" readonly :value="orderItem.course"></van-cell>
          <van-cell title="发单时间" readonly :value="orderItem.createTime"></van-cell>
        </div>
      </van-popup>

      <!-- 已接订单详情弹出层 -->
      <van-popup v-model="isShowTakenOrderDetails" closeable round position="bottom" :style="{ height: '80%' }">

        <van-cell-group class="orderDetails" title="订单详细信息" inset></van-cell-group>

        <!-- 代取快递 -->
        <div class="popup-main" v-if="orderItem.orderType === '代取快递'||orderItem.orderType === '加急快递'">
          <van-cell title="期望送达时间" readonly :value="orderItem.expectTime"></van-cell>
          <van-cell title="快递件数" class="color-mark" readonly :value="orderItem.count"></van-cell>
          <van-cell title="取件信息" :border="false" readonly>
            <template #default>
              <div>{{ orderItem.packageInfo }}</div>
            </template>
          </van-cell>
          <van-cell class="images-preview">
            <img class="imgItem" v-for="(item,index) in orderItem.images" :key="index" :src="item">
          </van-cell>
          <van-cell title="备注" readonly :border="false" v-model="orderItem.remark"></van-cell>
          <van-cell title="订单类型" readonly value="快递代取"></van-cell>
          <van-cell title="订单号" readonly :value="orderItem.number"></van-cell>
          <van-cell title="联系方式" readonly :value="orderItem.phone"></van-cell>
          <van-cell title="取件地址" value="菜鸟驿站"></van-cell>
          <van-cell title="送达地址" class="color-mark" readonly :value="orderItem.address"></van-cell>
          <div class="detail-btn-box">
            <van-button round style="margin: 10px 0" class="cannel detailBtn" v-if="orderItem.orderStatus === 2"
                        @click="cancelTakeOrder(orderItem)">取消接单</van-button>
            <van-button round class="cannel detailBtn  cannelBtn" @click="takePackage(orderItem)"
                        v-if="orderItem.orderStatus === -3" size="small">问题件</van-button>
            <van-button round class="waiting detailBtn takeOrderBtn" @click="takePackage(orderItem)"
                        v-if="takeStatusArr.includes(orderItem.orderStatus)" size="small">已取件</van-button>
            <van-button round class="doing detailBtn takeOrderBtn" @click="finishPackage(orderItem)"
                        v-else-if="orderItem.orderStatus === 3" size="small">已送达</van-button>
            <van-button round disabled class="taken detailBtn takeOrderBtn" v-else-if="orderItem.orderStatus === 4"
                        size="small">等待确认</van-button>
            <van-button round disabled class="done detailBtn takeOrderBtn" v-else-if="orderItem.orderStatus === 5"
                        size="small">已完成</van-button>
          </div>
          <div class="style-center" v-if="orderItem.orderStatus === 3">
            <van-uploader v-model="image" multiple :max-count="1" :after-read="afterRead"
                          accept="image/*"></van-uploader>
          </div>
          <div class="img-cover-box"
               v-if="(orderItem.orderStatus === 4||orderItem.orderStatus === 5)&&orderItem.imageOver">
            <img class="imgItem" :src="orderItem?.imageOver" alt="">
          </div>
        </div>

        <!-- 代跑腿 -->
        <div class="popup-main" v-if="orderItem.orderType === '代跑腿'">
          <van-cell title="订单类型" readonly :value="orderItem.orderType"></van-cell>
          <van-cell title="订单号" readonly :value="orderItem.number"></van-cell>
          <van-cell title="佣金" readonly :value="(+orderItem.amount).toFixed(2)"></van-cell>
          <van-cell title="联系方式" readonly :value="orderItem.phone"></van-cell>
          <van-cell title="任务地址" readonly :value="orderItem.address"></van-cell>
          <van-cell title="发单时间" readonly :value="orderItem.createTime"></van-cell>
          <van-cell title="快递件数" readonly :value="orderItem.count"></van-cell>
          <van-cell title="任务信息" :border="false" readonly>
            <template #default>
              <div>{{ orderItem.packageInfo }}</div>
            </template>
          </van-cell>
          <van-cell class="images-preview">
            <img class="imgItem" v-for="(item,index) in orderItem.images" :key="index" :src="item">
          </van-cell>
          <van-cell title="任务备注" readonly v-model="orderItem.remark"></van-cell>
          <van-cell title="帮手联系方式" readonly v-model="orderItem.helperPhone"></van-cell>
          <van-cell title="帮手地址" readonly v-model="orderItem.helperAddress"></van-cell>
          <van-cell title="接单时间" readonly v-model="orderItem.takeoutTime"></van-cell>
          <van-cell title="取件时间" readonly v-model="orderItem.takeTime"></van-cell>
          <van-cell title="送达时间" readonly v-model="orderItem.deliveryTime"></van-cell>
          <van-cell title="完成时间" readonly v-model="orderItem.finishTime"></van-cell>
          <div class="detail-btn-box">
            <van-button round style="width: 90%;margin: 10px auto;" class="cannel detailBtn"
                        v-if="orderItem.orderStatus === 2" @click="cancelTakeOrder(orderItem)">取消接单</van-button>
          </div>
        </div>
      </van-popup>

    </div>

    <!-- 底层标签页 -->
    <van-tabbar class="tabbar" v-model="active" @change="onChange">
      <van-tabbar-item icon="wap-home" name="home">主页</van-tabbar-item>
      <van-tabbar-item icon="shop" name="information">商家</van-tabbar-item>
      <van-tabbar-item icon="thumb-circle" name="distribute">下单</van-tabbar-item>
      <van-tabbar-item icon="bars" name="order">订单</van-tabbar-item>
      <van-tabbar-item icon="manager" name="personalCenter">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</body>
<script>
  new Vue({
    el: "#app",
    data() {
      return {
        active: 'order', // 控制底层标签栏的显示
        tabActive: '', // 控制标签页的显示
        orderStatus: 1, // 订单状态
        address: '', // 查询的地址
        takenOrderListCategory: '所有', // 已接订单列表分类
        path: '所有', // 分类查询地址
        isShowAreaList: false, // 是否展示地址列表
        isShowOutOrderDetails: false, // 是否显示已发订单详情
        isShowTakenOrderDetails: false, // 是否显示已接订单详情
        isLoading: false, // 是否下拉刷新加载样式
        isShowImagePreview: false, // 是否显示图片预览层
        images: [], // 图片预览的图片列表
        imagesStartPosition: 0, // 图片预览的起始位置
        orderItem: {}, // 单个订单数据
        outOrderList: [], // 已发订单列表
        takeOrderList: [], // 已接订单列表
        image: [], // 图片
        arriveImage: null, // 送达图片
        takeStatusArr: [-2, 2, 21, 22, 23, 24, 25]
      }
    },
    methods: {
      // 送达上传
      afterRead(file) {
        this.arriveImage = file.file
      },
      // 下拉刷新
      async onRefresh() {
        // 刷新历史订单列表
        await this.getHistoryOrder()
        setTimeout(() => {
          // 刷新成功提示
          this.$toast('刷新成功')
          // 关闭下拉刷新加载样式
          this.isLoading = false
        }, 1000)
      },
      // 查看详细订单
      showOutOrderDetails(item) {
        // 显示订单详情弹出层
        this.isShowOutOrderDetails = true
        // 将该订单数据转换为单个响应式数据 准备展示
        this.orderItem = item
        // 将该订单的图片列表转换为数组 准备展示
        this.images = item.images
        // 对未赋值的数据进行预处理
        switch (this.orderItem.orderStatus) {
          case 0:
          case 1: {
            this.orderItem.helperPhone = '未接单'
            this.orderItem.helperAddress = '未接单'
            this.orderItem.takeoutTime = '未接单'
          }
          case 2: this.orderItem.takeTime = '未取件'
          case 3: this.orderItem.deliveryTime = '未送达'
          case 4: this.orderItem.finishTime = '未完成'
        }
        // 对代刷网课业务的数据进行拆分
        if (this.orderItem.orderType === '代刷网课') {
          const packageInfos = this.orderItem.packageInfo.split(' ')
          const remarks = this.orderItem.remark.split(' ')
          this.orderItem.userNumber = packageInfos[0]
          this.orderItem.password = packageInfos[1]
          this.orderItem.platform = remarks[0]
          this.orderItem.course = remarks[1]
        }
      },
      // 查看已接详细订单
      showTakenOrderDetails(item) {
        // 显示订单详情弹出层
        this.isShowTakenOrderDetails = true
        // 将该订单数据转换为单个响应式数据 准备展示
        this.orderItem = item
        // 将该订单的图片列表转换为数组 准备展示
        this.images = item.images
      },
      // 预览选中图片
      showImagePreview(index) {
        // 将预览图片组件的开始索引改为该图片的索引 预览当前选中图片
        this.imagesStartPosition = index
        // 显示预览图片组件
        this.isShowImagePreview = true
      },
      // 底层标签栏 跳转其他页面
      onChange(index) {
        if (index === 'home') {
          // 跳转首页时携带flag参数 flag 0 表示不展示定制化广告
          location.href = './home.html?flag=0'
        } else {
          // 正常跳转其他页面
          location.href = `./${index}.html`
        }
      },
      // 客户操作 取消订单 
      async cancelOrder(item) {
        const res = await axios({ method: 'PUT', url: `/user/order/cancel/${item.id}` })
        if (res.code === 1) {
          // 取消订单成功提示
          this.$toast.success('取消订单成功')
          // 退款详情提示
          this.$notify({
            message: '退款将于半小时内到账',
            color: '#ffffff',
            background: '#2ED0DF',
            duration: 2000,
          })
          this.isShowOutOrderDetails = false
          // 刷新历史订单列表
          await this.getHistoryOrder()
        } else {
          // 取消订单失败提示
          this.$notify({
            message: '取消订单失败，请联系客服处理',
            color: '#ffffff',
            background: '#2ED0DF',
            duration: 2000,
          })
          // 刷新历史订单列表
          await this.getHistoryOrder()
        }
      },
      // 客户操作 确认送达
      async confirmArriveOrder(item) {
        const res = await axios({ method: 'PUT', url: `/user/order/confirm/${item.id}` })
        if (res.code === 1) {
          // 确认送达成功提示
          this.$toast.success('确认成功')
          // 刷新历史订单列表
          await this.getHistoryOrder()
        }
      },
      // 客户操作 查询进度
      checkProcess() {
        location.href = 'http://jingxiang.xyz'
      },
      // 帮手操作 取消接单
      async cancelTakeOrder(item) {
        const res = await axios({ method: 'PUT', url: `/user/order/takeCancel/${item.id}` })
        if (res.code === 1) {
          // 取件成功提示
          this.$toast.success('取消接单成功')
          // 刷新历史订单列表
          await this.getHistoryOrder()
          this.isShowTakenOrderDetails = false
        } else {
          this.$toast.fail(res.msg)
        }
      },
      // 帮手操作 已取件 
      async takePackage(item) {
        const res = await axios({ method: 'PUT', url: `/user/order/take/${item.id}` })
        if (res.code === 1) {
          // 取件成功提示
          this.$toast.success('取件成功')
          // 刷新历史订单列表
          await this.getHistoryOrder()
          this.isShowTakenOrderDetails = false
        }
      },
      // 帮手操作 已送达
      async finishPackage(item) {
        const formData = new FormData()
        if (this.arriveImage) {
          let compressedImage = await imageCompression(this.arriveImage)
          let conversions = base64ToFile(compressedImage, Date.now())
          formData.append('image', conversions)
        }
        const res = await axios({
          method: 'PUT',
          url: `/user/order/arrive/${item.id}`,
          data: formData
        })
        if (res.code === 1) {
          this.image = []
          this.arriveImage = null
          this.isShowTakenOrderDetails = false
          // 送达成功提示
          this.$toast.success('送达成功')
          await this.getHistoryOrder()
        }
      },
      // 获取历史订单
      async getHistoryOrder() {
        const res = await axios({ method: 'GET', url: '/user/order/getOrderList' })
        if (res.code === 1) {
          // 请求成功 刷新历史订单列表
          this.outOrderList = res.data.outOrderList
          this.takeOrderList = res.data.takeOrderList
        }
      },
    },
    async mounted() {
      // 默认获取历史订单列表
      await this.getHistoryOrder()
    }
  })
</script>

</html>